import React, { Component } from 'react'
import Child from './views/Child'
import './app.css'

/*
  子组件传值到父组件的步骤
  1）在子组件中触发事件,在事件处理函数中调用this.props.回调函数(),并且将子组件中的数据以实参的形式传递给这个回调函数
  2) 在父组件中引用子组件标签的开始标签部分，以回调函数作为key调用设置回调函数比如：<Child cb={回调函数}>
  3) 在父组件的回调函数的形参就是子组件传递给进来的数据
*/




export default class App extends Component {
  state={
    wguan:'非洲宝石王冠',
    fromChildMsg:''
  }
  getChildFromMsg=(data)=>{
    this.setState(()=>{
      return{
        fromChildMsg:data
      }
    })
  }
  render() {

    return (
      <div className='box'>
        <h1>伊丽莎白2世</h1>
        <div>{this.state.wguan}</div>
        <div>{this.state.fromChildMsg}</div>
        <Child wguan={this.state.wguan} cb={this.getChildFromMsg}></Child>
      </div>
    )
  }
}
